{% extends "metadata_base.html" %}
{% load i18n %}
{% load static %}
{% load base_tags %}
{% load bootstrap_tags %}
{% load guardian_tags %}

{% block title %}{{ layer.title }} — {{ block.super }}{% endblock %}

{% block body_class %}{% trans "data" %}{% endblock %}

{% block body_outer %}

{{ block.super }}

<!-- Required to make select2 fields work for autocomplete -->
<link href="{% static "vendor/select2/dist/css/select2.css" %}" type="text/css" media="screen" rel="stylesheet" />
<link href="{% static "autocomplete_light/select2.css" %}" type="text/css" media="screen" rel="stylesheet" />
<script type="text/javascript" src="{% static "admin/js/vendor/jquery/jquery.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/jquery.init.js" %}"></script>
<script type="text/javascript" src="{% static "vendor/select2/dist/js/select2.full.js" %}"></script>
<script type="text/javascript" src="{% static "vendor/select2/dist/js/i18n/en.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/autocomplete.init.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/forward.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/select2.js" %}"></script>
<script type="text/javascript" src="{% static "autocomplete_light/jquery.post-setup.js" %}"></script>

<div class="page-header">
  <a href="{% url "layer_browse" %}?limit={{ CLIENT_RESULTS_LIMIT }}" class="btn btn-primary pull-right">{% trans "Explore Layers" %}</a>
  <h2 class="page-title">{% trans "Edit Metadata" %}</h2>
</div>
<div class="row">
  <div class="col-md-8">
    <p class="lead">
      {% blocktrans with layer.title as layer_title %}
        Editing details for {{ layer_title }}
      {% endblocktrans %}
    </p>
    {% block advanced_edit_form %}
    <form id="metadata_update" class="form-horizontal" action="{% url "layer_metadata" layer.service_typename %}" method="POST">

      {% block metadata_uploaded_check %}
      {% if layer.metadata_uploaded_preserve %}
        <p class="bg-warning">{% blocktrans %}Note: this layer's orginal metadata was populated and preserved by importing a metadata XML file.
          This metadata cannot be edited.{% endblocktrans %}</p>
      {% elif layer.metadata_uploaded %}
        <p class="bg-warning">{% blocktrans %}Note: this layer's orginal metadata was populated by importing a metadata XML file.
          GeoNode's metadata import supports a subset of ISO, FGDC, and Dublin Core metadata elements.
          Some of your original metadata may have been lost.{% endblocktrans %}</p>
      {% endif %}
      {% endblock metadata_uploaded_check %}

      {% block layer_form_errors %}
      {% if layer_form.errors or attribute_form.errors or category_form.errors or author_form.errors or poc.errors %}
    	    <p class="bg-danger">{% blocktrans %}Error updating metadata.  Please check the following fields: {% endblocktrans %}</p>
          <ul class="bg-danger">
          {% if author_form.errors %}
            <li>{% trans "Metadata Author" %}</li>
            {{ author_form.errors }}
          {% endif %}
          {% if poc_form.errors %}
            <li>{% trans "Point of Contact" %}</li>
            {{ poc_form.errors }}
          {% endif %}
          {% for field in layer_form %}
            {% if field.errors %}
            <li>{{ field.label }}</li>
            {% endif %}
          {% endfor %}
          {% if not attribute_form.is_valid %}
            <li>{% trans "Attributes" %}</li>
            {% for field in attribute_form %}
              {% if field.errors %}
              <li>{{ field.errors }}</li>
              {% endif %}
            {% endfor %}
          {% endif %}
          {% if category_form.errors %}
            <li>{{ category_form.errors.as_ul }}</li>
          {% endif %}
          </ul>
        {% endif %}
      {% endblock layer_form_errors %}

        {% if not layer.metadata_uploaded_preserve %}
        <div class="form-actions">
          <a href="{% url 'layer_detail' layername=resource.alternate %}" class="btn btn-primary">{% trans "Return to Layer" %}</a>
          <input type="submit" id="btn_upd_md_up" class="btn btn-primary" value="{% trans "Update" %}"/>
        </div>
        {% endif %}

        {% csrf_token %}
        <!-- Added in the thesuarus field here since saving the form without it causes the thesuarus keywords to be removed. 
             Unfortunately this needs to appear at the bottom of the form since tkeywords_form is a complete other django form. 
             There might be a better way to solve this. -->
        <div class="col-md-6 form-controls">
          {% block layer_fields %}
          {% for field in layer_form %}
            {% if field.name != 'use_featureinfo_custom_template' and field.name != 'featureinfo_custom_template' %}
            <div style="margin-bottom: 25px">
              <span><label for="{{ field.id }}">{{ field.label }}</label></span>
              {{ field }}
            </div>
            {% endif %}
          {% endfor %}
          {% endblock layer_fields %}

          {% block thesauri %}
          {# layer_form|as_bootstrap #}
          {% if THESAURI_FILTERS %}
            {{ tkeywords_form }}
          {% endif %}

          {% endblock thesauri %}
        </div>

        {% block category %}
        <div class="row">
          <div class="col-md-12">
            <label class="control-label required-field">{% trans "Category" %}</label>
            <fieldset id="category_form">
              {% autoescape off %}
              {% for choice in category_form.category_choice_field.field.choices %}
              <div class="col-md-6">
                <label class="fancy-checkbox">
                    <input type="radio" name="category_choice_field" value="{{ choice.0 }}"
                      {% ifequal category_form.initial choice.0 %} checked="checked" {% endifequal %} />
                    {{ choice.1 }}
                </label>
              </div>
              <!-- div class="radio col-md-6">
                <input type="radio" name="category_choice_field" value="{{ choice.0 }}"
                  {% ifequal category_form.initial choice.0 %} checked="checked" {% endifequal %}>
                  {{ choice.1 }}
                </input>
              </div -->
              {% endfor %}
              {% endautoescape %}
            </fieldset>
          </div>
          {% endblock category %}

          {% block other_tab %}{% endblock other_tab %}

          {% block attributes %}
          <div class="col-md-12 grid-spacer">
            <h5>{% trans "Attributes" %}</h5>
            <label>{% trans "Use a custom template?" %}</label>
            <input type="checkbox" name="resource-use_featureinfo_custom_template" class="has-external-popover"
                data-content="specifies wether or not use a custom GetFeatureInfo template." data-placement="right"
                data-container="body" data-html="true" data-toggle="toggle"
                placeholder="specifies wether or not use a custom GetFeatureInfo template."
                id="id_resource-use_featureinfo_custom_template"
                {% if resource.use_featureinfo_custom_template %}checked{% endif %}>
            <div id="layer-attributes-panel"
                {% if resource.use_featureinfo_custom_template %}style="visibility: collapse;" {% endif %}>
                {{ attribute_form.management_form }}
                <table class="table table-striped table-bordered table-condensed">
                <tr>
                    <th>{% trans "Attribute" %}</th>
                    <th>{% trans "Label" %}</th>
                    <th>{% trans "Description" %}</th>
                    <th>{% trans "Display Order" %}</th>
                    <th>{% trans "Display Type" %}</th>
                    <th>{% trans "Visible" %}</th>
                </tr>
                {% for form in attribute_form.forms %}
                {% if form.attribute %}
                <tr>
                    <td><div style="display:none">{{form.id}}</div>{{form.attribute}}</td>
                    <td>{{form.attribute_label}}</td>
                    <td>{{form.description}}</td>
                    <td>{{form.display_order}}</td>
                    <td>{{form.featureinfo_type}}</td>
                    <td>{{form.visible}}</td>
                </tr>
                {% endif %}
                {% endfor %}
                </table>
            </div>
            {% endblock attributes %}

            {% block layer_custom_template %}
            <div id="layer-attributes-custom_template"
                  {% if not resource.use_featureinfo_custom_template %}style="visibility: collapse;" {% endif %}>
                {{layer_form.featureinfo_custom_template}}
            </div>
            {% endblock layer_custom_template %}

            {% block point_of_contact %}
            <fieldset class="form-controls modal-forms modal hide fade" id="poc_form" >
              <h2>{% trans "Point of Contact" %}</h2>
              {{ poc_form|as_bootstrap }}
              <button type='button' class="modal-cloose-btn btn btn-primary">{% trans "Done" %}</button>
            </fieldset>
            {% endblock point_of_contact %}
            {% block metadata_provider %}
            <fieldset class="form-controls modal-forms modal hide fade" id="metadata_form">
              <h2>{% trans "Metadata Provider" %}</h2>
                {{ author_form|as_bootstrap }}
              <button type='button' class="modal-cloose-btn btn btn-primary">{% trans "Done" %}</button>
            </fieldset>
            {% endblock metadata_provider %}

            {% if not layer.metadata_uploaded_preserve %}
            {% block form_actions %}
            <div class="form-actions">
              <a href="{% url 'layer_detail' layername=resource.alternate %}" class="btn btn-primary">{% trans "Return to Layer" %}</a>
              <input type="submit" id="btn_upd_md_dwn" class="btn btn-primary" value="{% trans "Update" %}"/>
            </div>
            {% endblock form_actions %}
            {% endif %}
          </div>
        </div>
      </form>
      {% endblock advanced_edit_form %}
  </div>
</div>

<div class="modal fade" style="width: 100%; height: 100%;" id="error_mandatoryDialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content panel-warning">
      <div class="modal-header panel-heading">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">{% trans "ERROR" %}</h4>
      </div>
      <div class="modal-body general_errors">
        {% trans "Following items are required:" %}
        <p id="general_errors"></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">{% trans "Close" %}</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_script %}
    {{ block.super }}
    <script type="text/javascript">
        $(document.body).on("change", "#id_resource-use_featureinfo_custom_template", function (event) {
            if (this.checked) {
                $('#layer-attributes-panel').css("visibility", "collapse");
                $('#layer-attributes-custom_template').css("visibility", "visible");
            } else {
                $('#layer-attributes-panel').css("visibility", "visible");
                $('#layer-attributes-custom_template').css("visibility", "collapse");
            }
        });
    </script>
{% endblock %}